<template>
<div class="wrap">
<xcl-header :page-title="pageTitle" :call-back="()=>{}" :header-right="headerRight"></xcl-header>
<div class="content">


	<div class="list-block" v-show="$route.params.step=='step1'">
	    <ul>
	       <li>
	        <div class="item-content">
	          <div class="item-inner">
	            <div class="item-title label" style="width:25%">登录密码</div>
	            <div class="item-input">
	              <input type="password" placeholder="输入登录密码" maxlength="20" v-model="user.password">
	            </div>
	          </div>
	        </div>
	      </li>
	       <li v-show="user.isBindIdNumber &&$route.params.step=='step1'">
	        <div class="item-content">
	          <div class="item-inner">
	            <div class="item-title label" style="width:25%">身份证号</div>
	            <div class="item-input">
	              <input type="text" placeholder="请输入身份证号" maxlength="20" v-model="user.idNumber">
	            </div>
	          </div>
	        </div>
	      </li>
		</ul>
	</div>
	<div class="list-block" v-show="user.isBindQuestion  &&$route.params.step=='step1'">
		<div class="content-block-title" style="margin-top:1rem">密保问题：{{user.question}}</div>
	    <ul>
	      <li>
	        <div class="item-content">
	          <div class="item-inner">
	            <div class="item-input">
	              <input type="text" placeholder= '请输入密保答案' maxlength="20" v-model="user.answer">
	            </div>
	          </div>
	        </div>
	      </li>
		</ul>
</div>



<div class="list-block" v-show="$route.params.step=='step2'">
	    <ul>
	      <li>
	        <div class="item-content">
	          <div class="item-inner">
	            <div class="item-title label"  style="width:21%">验证码</div>
	            <div class="item-input">
	              <input type="text" maxlength="4" v-model="user.softCodeInput"  placeholder="输入验证码">	              
	            </div>
	            <div class="item-input"><img  :src="softCode" @click="refreshCode" /></div>
	          </div>
	        </div>
	      </li>
	      <li>
	        <div class="item-content">
	          <div class="item-inner">
	            <div class="item-title label" style="width:21%">手机号</div>
	            <div class="item-input">
	              <input type="text" placeholder="输入11位手机号" maxlength="11" v-model="user.newPhoneNumber">
	            </div>
	            <div class="item-input text-right">
	               <a :class="[user.smsCodeGetting ? 'mute' : '']" href="javascript:;" v-text="user.smsCodeText" @click="getSmsCode"></a>
	            </div>
	          </div>
	        </div>
	      </li>
	      <li>
	        <div class="item-content">
	          <div class="item-inner">
	            <div class="item-title label" style="width:21%">动态码</div>
	            <div class="item-input">
	              <input type="text" placeholder="输入短信中6位验证码" maxlength="6" v-model="user.smsCode">
	            </div>
	          </div>
	        </div>
	      </li>
		</ul>
	</div>
	<div class="content-block">
		<button :class="['button','button-fill','btn-style',forbidenLogin ? 'disabled':'']"  @click="signUp">{{btnText}}</button>
	</div>	
</div>
<xcl-toast :show="toast.show" :show-content="toast.content"></xcl-toast>

  </div>
</template>
<script>
	import xclHeader from '../components/header.vue'
	import {getCheck,ERROR_DEFINE,QUESTIONS}  from '../libs/utils'
	import xclToast from '../components/xclToast.vue'

	let UserProxy =  require("../proxy/user_proxy");
	let User = new UserProxy();
	export default {
		data(){
			return{
				pageTitle:'修改手机号',
				headerRight:'',
				btnText:'下一步',
				softCode:SoftCodeUrl+'?img='+Math.floor(Math.random() * (10000 + 1)),
				callBack:()=>{},
				submitting:false,
				header:{
					show:true
				},
                user:{
                	smsCodeText:'获取动态码',
                	smsCode:'',
                	softCodeInput:'',
                	password:'',
                	repeatPassword:'',
                	question:'',
                	answer:'',
                	idNumber:'',
                	isBindIdNumber:false,
                	isBindQuestion:false,
                	randNum:0,
                	questionIndex:0,
                },
                toast:{
                	show:false,
                	content:''
                }
			}
		},
		computed:{
			forbidenLogin(){
				var step = this.$route.params.step;
				switch(step){
					case 'step1':
						if(this.user.isBindQuestion && this.user.isBindIdNumber){
							return !this.user.password || !this.user.answer || !this.user.idNumber || this.submitting; 
						}else if(this.user.isBindQuestion){
							return !this.user.password || !this.user.answer|| this.submitting;
						}else if(this.user.isBindIdNumber){
							return !this.user.password || !this.user.idNumber|| this.submitting;
						}else{
							return !this.user.password|| this.submitting;
						}
					case 'step2':
						return !this.user.smsCode || !this.user.newPhoneNumber || !this.user.softCodeInput; 
				}
			},
		},
		ready(){
			var _this = this;
			User.isRegisterFinish(localStorage.token,(d)=>{
				if (d.code == 200 && d.results){
					var getcode = d.results[0];
					if(getcode&32){
						_this.user.isBindQuestion = true;
						User.getQuestionIndexs(localStorage.token,(d1)=>{
							if(d1.code == 200 && d1.results[0]&& d1.results[1]&& d1.results[2]){
								let randNum=Math.ceil(Math.random()*2);
								_this.user.questionIndex = d1.results[randNum]; 
								_this.user.question = QUESTIONS[d1.results[randNum]];
								_this.user.randNum = randNum;
							}
						});
					}
					if(getcode&4){
						_this.user.isBindIdNumber = true;
					}
				}
			});
		},
		methods:{
			signUp(){
				let _this = this;
				let step  = this.$route.params.step;
				if(this.forbidenLogin)return false;
				if(step=='step1'){
					this.step1();
				}else if(step=='step2'){
					this.step2();
				}

			},
			refreshCode(){
				this.softCode=SoftCodeUrl+'?img='+Math.floor(Math.random() * (10000 + 1));
			},
			showToast(text){
				this.toast={show:true,content:text};
				setTimeout(()=>{this.toast.show =  false},2800);
			},
			step1(){
				var _this = this;
				_this.submitting = true;
				User.validateIdentity(
					localStorage.token,
					_this.user.password,
					_this.user.idNumber,
					_this.user.randNum+1,
					_this.user.questionIndex,
					_this.user.answer,
					(d)=>{
					if(d.code ==200 && d.results &&d.results[0].result){
							localStorage.pageToken = d.results[0].pageToken;
							localStorage.time = d.results[0].time;
							_this.$router.go('./step2');
					}else{
						_this.toast = {show:true,content:ERROR_DEFINE[d.code]};
                        setTimeout(()=>{
                        	_this.toast.show = false;
                        	_this.submitting = false;
                        },2800);
					}
				});
			},
			step2(){
				var _this = this ;
				User.modifyEmailOrPhone(localStorage.token,
					_this.user.smsCode,
					_this.user.newPhoneNumber,
					localStorage.email,
					localStorage.time,
					localStorage.pageToken,
					(d)=>{
					if(d.code == 200){
						_this.forbidenLogin = true;
						localStorage.removeItem('token');
						_this.toast = {show:true,content:'手机号修改成功，请重新登录！'};
                        setTimeout(()=>{
                        	_this.toast.show = false;
                        	_this.$router.go('/Login');
                        },2800);
					}else{
						_this.showToast(ERROR_DEFINE[d.code]);
					}
				});
			},
			getSmsCode(){
                let _this = this;
                if(_this.user.smsCodeGetting) return false;
                if(!this.user.softCodeInput){
                    this.showToast('请先输入图片验证码！');
                    return false;
                }
                User.phoneIsExisted(localStorage.phoneNumber,(d1)=>{
                    if(d1.code == 200  &&  !d1.results[0]){
                        _this.showToast('该手机号不存在');
                    }else{
                        User.requestSMSValidate(localStorage.phoneNumber+'|'+_this.user.softCodeInput,(d)=>{
                            if(d.code == 200 && d.results && d.results.length){
                                _this.showToast('短信动态码已发送');
                                _this.user.smsCodeGetting2 = true;
                                var start = 60;
                                var timer = setInterval(()=>{
                                    _this.user.smsCodeText = start+'s后重新发送';
                                    start--;
                                    if(start <= 0) {
                                        clearInterval(timer);
                                        _this.user.smsCodeGetting2 = false;
                                        _this.user.smsCodeText = '重新发送';
                                    }
                                },1000);
                                //only for development
                                if(window.IsDev)_this.user.smsCode = d.results[0];
                            }else if(d.code == 404){
                                _this.showToast(ERROR_DEFINE[d.code]);
                                _this.refreshCode();
                            }else{
                                _this.showToast(ERROR_DEFINE[d.code]);
                            }
                        });
                    }
                });
                
            }
		},
		components:{
           "xclHeader":xclHeader,  
           'xclToast':xclToast              
        }
	}
</script>
<style  lang="stylus">
	.text-right
		text-align right
	.btn-style
		height 2rem
		font-size .85rem
		line-height 2rem !important
		width:100%
	.mute
		color #ddd	
	.f12
		font-size .8em	
</style>	
